<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="数据配置" name="directly">
        <aside>
          订单相关配置
        </aside>
        <el-form ref="dataForm" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
          <!-- <el-form-item label="司机添加路线" prop="line">
            <el-input v-model="temp.line" /><p>条(最多添加条数)</p>
          </el-form-item> -->
          <!-- <el-form-item label="订单超过" prop="line">
            <el-input v-model="temp.line" /><p>时(未付款自动关闭)</p>
          </el-form-item> -->
          <el-form-item label="每公里价格" prop="line">
            <el-input v-model="kmMoney" /><p>元</p>
          </el-form-item>
          <!-- <el-form-item label="Date" prop="timestamp">
            <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date" />
          </el-form-item>
          <el-form-item label="Title" prop="title">
            <el-input v-model="temp.title" />
          </el-form-item>
         <el-form-item label="Status">
            <el-select v-model="temp.status" class="filter-item" placeholder="Please select">
              <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="Imp">
            <el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
          </el-form-item>
          <el-form-item label="Remark">
            <el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
          </el-form-item> -->
        </el-form>
        <div style="margin-left: 50px;padding-left: 100px;">
          <el-button type="primary" @click="saveOrderSetting()">
            保存
          </el-button>
        </div>

      </el-tab-pane>
      <el-tab-pane label="货物配置" name="v-directive">
        <div>
          <aside>
            货物配置
          </aside>

          <div class="filter-container" style="margin: 20px;">
            <el-button class="el-button filter-item el-button--primary el-button--medium" type="primary" @click="handleFilter(1)">
              添加
            </el-button>

            <el-button
              class="el-button filter-item el-button--primary el-button--medium"
              type="primary"
              @click="deleteSet(1)"
            >删除</el-button>
          </div>
          <div>
            <el-row>
              <div v-for="item in level1" :key="item.id">
                <el-col :span="3">
                  <div
                    class="grid-content bg-purple-dark chooseClass"
                    :class="chooseData['level1'].indexOf(item.id)!=-1?'chooseData':''"
                    @click="choose(item.id,'level1')"
                  >{{ item.content }}</div>
                </el-col>
              </div>
            </el-row>
          </div>
        </div>
        <div style="margin-top:28px">
          <aside>
            几装机卸
          </aside>

          <div class="filter-container" style="margin: 20px;">
            <el-button class="el-button filter-item el-button--primary el-button--medium" type="primary" @click="handleFilter(2)">
              添加
            </el-button>

            <el-button
              class="el-button filter-item el-button--primary el-button--medium"
              type="primary"
              @click="deleteSet(2)"
            >删除</el-button>
          </div>

          <div>
            <el-row>
              <div v-for="item in level2" :key="item.id">
                <el-col :span="3">
                  <div
                    class="grid-content bg-purple-dark chooseClass"
                    :class="chooseData['level2'].indexOf(item.id)!=-1?'chooseData':''"
                    @click="choose(item.id,'level2')"
                  >{{ item.content }}</div>
                </el-col>
              </div>
            </el-row>
          </div>
        </div>
        <div style="margin-top:28px">
          <aside>
            特殊要求
          </aside>

          <div class="filter-container" style="margin: 20px;">
            <el-button class="el-button filter-item el-button--primary el-button--medium" type="primary" @click="handleFilter(3)">
              添加
            </el-button>

            <el-button
              class="el-button filter-item el-button--primary el-button--medium"
              type="primary"
              @click="deleteSet(3)"
            >删除</el-button>
          </div>

          <div>
            <el-row>
              <div v-for="item in level3" :key="item.id">
                <el-col :span="3">
                  <div
                    class="grid-content bg-purple-dark chooseClass"
                    :class="chooseData['level3'].indexOf(item.id)!=-1?'chooseData':''"
                    @click="choose(item.id,'level3')"
                  >{{ item.content }}</div>
                </el-col>
              </div>
            </el-row>
          </div>
        </div>

      </el-tab-pane>
    </el-tabs>
    <el-dialog ref="drag-dialog" :visible.sync="dialogTableVisible" title="添加">
      <div>

        <el-form :model="form" label-width="80px" label-position="left">
          <el-form-item label="名称">
            <el-input v-model="form.content" placeholder="名称" />
          </el-form-item>

          <div style="text-align:right;">
            <el-button type="danger" @click="dialogTableVisible=false">关闭</el-button>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { getSetting, deleteSetting, addSetting, orderSetting, getMoney, saveOrderSetting, saveKmMoney } from '@/api/order'
import clip from '@/utils/clipboard' // use clipboard directly
import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive

const calendarTypeOptions = [
  { key: 'CN', display_name: 'China' },
  { key: 'US', display_name: 'USA' },
  { key: 'JP', display_name: 'Japan' },
  { key: 'EU', display_name: 'Eurozone' }
]

// arr to obj, such as { CN : "China", US : "USA" }
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})

export default {
  name: 'ClipboardDemo',
  directives: {
    clipboard
  },

  filters: {
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    }
  },

  data() {
    return {
      activeName: 'directly',
      inputData: 'https://github.com/PanJiaChen/vue-element-admin',
      inputDataD: 'https://github.com/PanJiaChen/vue-element-admin33',
      dialogTableVisible: false,
      listLoading: true,
      calendarTypeOptions,
      temp: {
        'id': 0,
        'line': 0,
        'money': {
          'high': 0,
          'low': 0
        },
        'overDay': 0,
        'overService': 0,
        'overTime': 0,
        'rule': 0
      },
      kmMoney: 0,
      form: {
        'content': '',
        'level': '',
        'type': 1
      },
      level1: [],
      level2: [],
      level3: [],
      chooseData: {
        level1: [],
        level2: [],
        level3: []
      }
    }
  },
  created() {
    this.getList()
    this.getOrderSeting()
  },
  methods: {
    handleCopy(text, event) {
      clip(text, event)
    },
    clipboardSuccess() {
      this.$message({
        message: 'Copy successfully',
        type: 'success',
        duration: 1500
      })
    },
    getList() {
      this.listLoading = true
      getSetting().then(response => {
        this.level1 = response.result[0].infos
        this.level2 = response.result[1].infos
        this.level3 = response.result[2].infos
        this.$forceUpdate()
        // Just to simulate the time of the request
        // setTimeout(() => {
        //   this.listLoading = false
        // }, 1.5 * 1000)
      })
    },
    handleFilter(level) {
      console.log(level)
      this.form.level = level
      // var dialogTableVisible = !this.dialogTableVisible
      this.dialogTableVisible = !this.dialogTableVisible
    },

    deleteSet(level) {
      var levelId = 'level' + level
      // for (const id in this.chooseData[levelId]) {
      //   // console.log()
      //   deleteSetting(this.chooseData[levelId][id]).then(response => {
      //   })
      // }
      for (var i = 0; i < this.chooseData[levelId].length; i++) {
        console.log(i)

        deleteSetting(this.chooseData[levelId][i]).then(response => {
        })
        if (i === (this.chooseData[levelId].length - 1)) {
          this.chooseData[levelId] = []
          this.getList()
        }
      }
      // if ((i) === (this.chooseData[levelId].length)) {
      //   this.chooseData[levelId] = []
      //   console.log(i + '1111')
      //   console.log(this.chooseData[levelId].length)
      //   this.getList()
      // }
    },
    onSubmit() {
      addSetting(this.form).then(response => {
        this.form.content = ''
        this.getList()
        this.dialogTableVisible = false
      })
      console.log(this.form)
    },
    choose(id, level) {
      if (this.chooseData[level].indexOf(id) === -1) {
        this.chooseData[level].push(id)
      } else {
        this.chooseData[level].splice(this.chooseData[level].indexOf(id), 1)
      }
      console.log(this.chooseData)
    },
    getOrderSeting() {
      orderSetting().then(response => {
        this.temp = response.result
        getMoney().then(res => {
          this.kmMoney = res.result.money
        })
      })
    },
    saveOrderSetting() {
      saveOrderSetting(this.temp).then(response => {
        saveKmMoney(this.kmMoney).then(res => {
          this.$notify({
            title: '成功',
            message: '保存成功',
            type: 'success',
            duration: 2000
          })
        })
      })
    }
  }
}
</script>

<style scoped>
.el-col-3{
  min-width: 50px;
}
.chooseClass {
  line-height: 22px;
  margin: 5px;
  border: 1px solid;
  text-align: center;
}
.chooseData{
  border:1px solid #409EFF;
  color: #409EFF;
}
</style>
